<template>
  <div :class="types==='progress'?'progress':'adiouProgress'" ref="progress">
    <div class="progress-line"></div>
    <div v-if="types==='progress'" class="progress-bg" ref="linebg" :style="{ width: `${progressWidth}` }">
      <div  class="progress-btn"   @mousedown.self.stop="move"></div>
    </div>
    <div v-else class="progress-bg" ref="linebg">
      <div class="progress-btn" ref="linebtn"   @mousedown.self.stop="point"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    progressWidth: {
      type: [String,Number],
    },
    types:{
      type:String,
      default:'progress'
    }
  },
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {
    move(){  //进度条
     let currentTime;
      document.onmousemove = (e)=>{
        this.$refs.linebg.style.width=e.clientX+'px';//设置进度条的宽度为当前移动的距离
        currentTime=Math.floor((e.clientX / this.$refs.progress.offsetWidth)*100000)/1000; //保留3位小数,原生方法有bug
      };
      document.body.onselectstart = function () { return false } //禁止页面选中
      document.onmouseup =()=>{
        this.$emit('setProgressLine', { val:currentTime})  //抬起鼠标时触发父级修改音乐进度事件，并把当前的（23，323）进度条所占比传个父级
        document.onmousemove=document.body.onselectstart=document.onmouseup=null; //离开时重置事件
      };
    },
    point(){ //音乐声音拖动条
     let adoWidth = this.$refs.linebg;
     let adoVolume
      document.onmousemove = (e)=>{
        if(e.clientX-1010<179){  //限制边界
          adoWidth.style.width=e.clientX-1010+'px' //由于一些原因用的常数代替了offsetLeft,1010为音乐条距离document边界的距离
          adoVolume=Math.floor((e.clientX-1010)/180*100)/100
        }else{
          adoWidth.style.width=180+'px'
          adoVolume=1.0;
        }
        if(e.clientX-1010<1){
          adoWidth.style.width=0+'px'
          adoVolume=0.0;
        }
      };
      document.body.onselectstart = function () { return false }
      document.onmouseup =()=>{
        this.$emit('setVolume', { val:adoVolume})
        document.onmousemove=document.body.onselectstart=document.onmouseup=null;
      };
    } 
  }
};
</script>
<style lang="less" scoped>
.adiouProgress{
  width: 180px;
  height: 4px;
  padding: 2px 0;
}
.progress {
  width: 100%;
  height: 4px;
  padding: 2px 0;
  position: relative;
  margin-bottom: 10px;
}
  .progress-line {
    width: 100%;
    height: 4px;
    background-color: #eee;
    position: absolute;
    left: 0;
    top: 0;
  }
  .progress-bg {
    height: 4px;
    width: 50px;
    background-color: #ff641e;
    border-radius: 4px;
    position: absolute;
    top: 0;
    left: 0;
  }
  .progress-btn {
    position: absolute;
    right: -4px;
    top: -4px;
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%;
    border: 4px solid #ff641e;
    cursor: grab;
  }
</style>
